/*
 * @Description: 顶部身份信息和名字组建
 * @Author: tao.xie
 * @Date: 2019-03-22 16:26:30
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-04-12 17:59:06
 */
<template>
  <div class="flex-h flex-vc bank-card-face-wrapper">
    <img src="../assets/card.png" />
    <!-- 名称和身份证包裹层 -->
    <div class="flex-v flex1 info-wrapper">
      <span>{{username}}</span>
      <span>{{id}}</span>
    </div>
    <!-- 身份信息包裹层 -->
    <div class="flex-h flex-hs flex-vc update-wrapper">
      <span @click="updateApplyInfo">身份信息变更</span>
      <i class="icon iconfont icon-rightangel"></i>
    </div>
  </div>
</template>

<script>
import { getVCardApplyInfo, checkUnpaySuccessBill, checkUnBindBankCard } from '../api/api.js'
import ConfirmBox from '@/components/confirm/ConfirmBox.js'
import UpdateApplyInfoDialogJS from './UpdateApplyInfoDialogJS.js'
import { open } from '@/utils/JumpUtils.js'
export default {
  data() {
    return {
      username: '',
      id: ''
    }
  },
  mounted() {
    this._getVCardApplyInfo()

    // 添加返回刷新
    window.onResume = () => {
      this._getVCardApplyInfo()
    }
  },
  methods: {
    _getVCardApplyInfo: async function () {
      try {
        let rs = await getVCardApplyInfo()
        this.username = rs[0]
        this.id = rs[1]
      } catch (err) { }
    },
    showUnBindCardDialog(msg) {
      ConfirmBox.show({
        title: '无法变更',
        message: msg,
        confirmText: '去解绑',
        cancelText: '再看看'
      }).then(() => {
        // 跳转到我的钱包页面
        open('mywallet.html?_tv=false')
      }).catch(() => {
      })
    },
    showUnpaySuccessBillDialog(msg) {
      ConfirmBox.show({
        title: '无法变更',
        message: msg,
        confirmText: '立即支付',
        cancelText: '暂不处理'
      }).then(() => {
        // 跳转到失败行程列表页面
        open('payorderlist.html?_tv=false&from=bindcard')
      }).catch(() => {
      })
    },
    updateApplyInfo: async function () {
      try {
        await checkUnpaySuccessBill()
        try {
          await checkUnBindBankCard()
          UpdateApplyInfoDialogJS.show()
        } catch (err) {
          this.showUnBindCardDialog(err.message)
        }
      } catch (err) {
        this.showUnpaySuccessBillDialog(err.message)
      }
    }
  }}
</script>

<style scoped>
/* 身份信息包裹层 */
.bank-card-face-wrapper {
  width: 690px;
  height: 200px;
  background: linear-gradient(
    156deg,
    rgba(76, 184, 255, 0.9) 0%,
    rgba(36, 49, 235, 0.9) 100%
  );
  border-radius: 15px;
  /* margin-top: 20px; */
  position: relative;
}
/* 图片 */
.bank-card-face-wrapper > img:first-of-type {
  width: 122px;
  height: 109px;
  margin-left: 43px;
}
/* 身份证和名字包裹层 */
.info-wrapper {
  padding-left: 33px;
}

/* 名字 */
.info-wrapper > span:first-of-type {
  font-size: 19px; /*no*/
  line-height: 27px; /*no*/
  color: #fff;
}
/* 身份证 */
.info-wrapper > span:nth-of-type(2) {
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  color: #fff;
  margin-top: 10px;
}
/* 身份信息变更包裹层 */
.update-wrapper {
  height: 44px;
  background: linear-gradient(
    97deg,
    rgba(154, 191, 252, 1) 0%,
    rgba(135, 155, 241, 1) 100%
  );
  border-radius: 100px 0px 0px 100px;
  opacity: 0.9;
  color: #fff;
  position: absolute;
  right: 0px;
  top: 50px;
  padding-left: 6px;
}
/* 身份信息变更左边文字 */
.update-wrapper > span:first-of-type {
  font-size: 13px; /*no*/
  line-height: 23px; /*no*/
  margin: 8px;
  font-weight: bold;
}
/* 身份信息变更箭头 */
.update-wrapper > i:first-of-type {
  font-size: 10px; /*no*/
  transform: scale(0.8);
}
</style>
